<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h1>Click on the query</h1>
    <form>
        <input type="text" name="name">
        <input type="button" value="查询" onclick="doQueryBrands()" class="btn btn-primary">
        <input type="button" value="添加" onclick="doAddUI()" class="btn btn-primary" >
    </form>
    <table class="table table-hover" >
        <!--thead表示标题部分-->
        <thead>
        <tr>
            <th>ID</th>
            <th>name</th>
            <th>remark</th>
            <th>createdTime</th>
            <th>operation</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="goods:${list}">
            <td th:text="${goods.id}"></td>
            <td th:text="${goods.name}"></td>
            <td th:text="${goods.remark}"></td>
            <td th:text="${#dates.format(goods.createdTime, 'yyyy/MM/dd HH:mm')}"></td>
            <td>
                <button type="button" th:onclick="doDeleteBuId([[${goods.id}]])" class="btn btn-danger" >delete</button>
                <button type="button" th:onclick="doFindById([[${goods.id}]])"  class="btn btn-warning">update</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    function doQueryBrands(){
        //获取输入得品牌名称
        let name = document.forms[0].name.value;
        //访问服务端指定得url
        location.href=`http://localhost/brand/doFindBrands/${name}`;
        //如上语句中使用到了js中得模板字符串其语法为`字符串`,在反引号内部还可以使用${}获取变量的值
    }
    function doDeleteBuId(id){
        location.href=`http://localhost/brand/doDeleteById/${id}`;
    }

    function doAddUI(){
        location.href=`http://localhost/brand/doAddUI`;
    }

    function doFindById(id){
        location.href=`http://localhost/brand/doFindById/${id}`;
    }
</script>
</body>
</html>